<template>
    <div>
        <Form ref="formCustom" :model="into" :label-width="80">
            <Row>
                <Col span="6">
                    <FormItem label="设备名称">
                        <Input type="text" v-model="into.name" disabled></Input>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="设备编号">
                        <Input type="text" v-model="into.sn" disabled></Input>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="设备空间">
                        <Input type="text" v-model="iotSpaceName" disabled></Input>
                    </FormItem>
                </Col>
                <Col span="6"></Col>
            </Row>
            <Row>
                <Col span="6">
                    <FormItem label="设备属性">
                        <Select v-model="params.selectProp" placeholder="选择属性" @on-change="doSelect">
                            <Option :value="item.name" v-for="(item, index) in propsSelections" :key="index">
                                {{item.name}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="开始时间">
                        <DatePicker type="datetime" placeholder="开始时间" v-model="params.sTime"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="结束时间">
                        <DatePicker type="datetime" placeholder="结束时间" v-model="params.eTime"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="6">
                    <Button type="primary" style="width: 90%;margin-left: 20px" @click="doFilter">筛选数据</Button>
                </Col>
            </Row>
        </Form>
        <Form ref="formCustom" :model="into" :label-width="80">
            <Row>
                <Col span="6">
                    <FormItem label="数据时间">
                        <DatePicker type="datetime" placeholder="开始时间" v-model="entry.theTime"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="录入数值">
                        <Input type="text" v-model="entry.avalue"></Input>
                        <!--<InputNumber v-model="entry.avalue" style="width: 100%;"></InputNumber>-->
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="数据单位">
                        <Input type="text" v-model="entry.unit"></Input>
                    </FormItem>
                </Col>
                <Col span="6">
                    <Button type="primary" style="width: 40%;margin-left: 20px"
                            :disabled="entry.theTime === '' || entry.avalue === ''" @click="doSave"
                            :loading="savingLoading">{{entry.id ? '保存编辑' : '保存新增'}}
                    </Button>
                    <Button type="default" style="width: 40%;margin-left: 20px" @click="makeEmpty">清空录入</Button>
                </Col>
            </Row>
        </Form>
        <div style="padding: 5px 15px;">
            <div style="text-align: right;margin-bottom: 5px;">
                <Button type="default" style="width: 80px;margin-left: 10px" @click="doLater" size="small">下载模板</Button>
                <Button type="default" style="width: 80px;margin-left: 10px" @click="doLater" size="small">批量上传</Button>
                <Button type="error" style="width: 80px;margin-left: 10px" @click="doDel" size="small" :loading="delLoading">删除</Button>
            </div>
            <Table stripe :columns="columns1" :data="data1" size="small" height="600" border :loading="tableLoading"
                   @on-selection-change="tableSelection"></Table>
        </div>
        <Row style="text-align: center;margin-top: 10px">
            <Page :total="totals" size="small" :page-size="params.size" :current="params.page + 1" @on-change="changePage" show-total/>
        </Row>
    </div>
</template>

<script>
    export default {
        name: 'DataEntry',
        props: {
            into: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        created: function () {
        },
        mounted: function () {
        },
        data() {
            return {
                totals: 0,
                selections: [],
                savingLoading: false,
                delLoading: false,
                tableLoading: false,
                iotSpaceName: '',
                propsSelections: [],
                params: {
                    devId: this.into.id,
                    selectProp: '',
                    sTime: '',
                    eTime: '',
                    page: 0,
                    size: 50
                },
                entry: {
                    avalue: '',
                    theTime: '',
                    unit: ''
                },
                columns1: [{
                    type: 'selection',
                    fixed: 'left',
                    width: 60,
                    align: 'center'
                },
                    {
                        fixed: 'left',
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '设备ID',
                        fixed: 'left',
                        width: 100,
                        key: 'dev_id'
                    },
                    {
                        title: '设备属性',
                        width: 100,
                        fixed: 'left',
                        key: 'data_type'
                    },
                    {
                        title: '数据时间',
                        key: 'the_time'
                    },
                    {
                        title: '属性数据',
                        key: 'dvalue'
                    },
                    {
                        title: '属性单位',
                        key: 'unit'
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        key: 'action',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            let obj = params.row
                                            this.entry.theTime = obj.the_time
                                            this.entry.avalue = obj.dvalue
                                            this.entry.propName = obj.data_type
                                            this.entry.devId = obj.dev_id
                                            this.entry.unit = obj.unit
                                            this.entry.id = obj.id
                                        }
                                    }
                                }, '编辑')
                            ])
                        }
                    }
                ],
                data1: []
            }
        },
        methods: {
            changePage(ee) {
                this.params.page = ee - 1
                this.loadDatas()
            },
            doFilter() {
                this.params.page = 0
                this.loadDatas()
            },
            doSave() {
                if (this.entry.theTime instanceof Date) {
                    this.entry.theTime = this.entry.theTime.format('yyyy-MM-dd hh:mm:ss')
                }
                if (this.entry.id) {
                    // 更新操作
                    window.myapi.do_post('/iot/dev/updDataLogs', this.entry).then(res => {
                        if (res.status === 200) {
                            if (res.data.data === 1) {
                                this.loadDatas()
                                this.makeEmpty()
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '保存成功'
                                })
                            }
                        }
                    }).catch(function (e) {
                    }).finally(() => {
                        this.savingLoading = false
                    })
                } else {
                    // 新增操作
                    this.savingLoading = true
                    this.entry.devId = this.into.id
                    this.entry.propName = this.params.selectProp
                    window.myapi.do_post('/iot/dev/saveDataLogs', this.entry).then(res => {
                        if (res.status === 200) {
                            if (res.data.data === 1) {
                                this.loadDatas()
                                this.makeEmpty()
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '保存成功'
                                })
                            }
                        }
                    }).catch(function (e) {
                    }).finally(() => {
                        this.savingLoading = false
                    })
                }
            },
            makeEmpty() {
                this.entry = {
                    theTime: '',
                    avalue: ''
                }
            },
            makeDefault () {
                this.data1 = []
                this.makeEmpty()
            },
            doLater () {
                this.$Message.info('将来完成时.....待续')
            },
            doDel () {
                // 删除方法
                if (this.selections.length === 0) {
                    this.$Message.warning('没有选择数据')
                    return
                }

                this.$Modal.confirm({
                    title: '删除确认',
                    content: '<p>确认要删除该所选择的数据吗?</p>',
                    onOk: () => {
                        this.del(this.selections.map(item => item.id))
                    },
                    onCancel: () => {
                    }
                })
            },
            del (ids) {
                this.delLoading = true
                window.myapi.do_del('/iot/dev/delDataLogs', ids).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.params.page = 0
                        this.loadDatas()
                        this.$Notice.success({
                            title: '提示',
                            desc: '删除成功'
                        })
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp
                        })
                    }
                }).finally(() => {
                    this.delLoading = false
                })
            },
            tableSelection (selection, row) {
                this.selections = selection
            },
            doSelect () {
                this.params.page = 0
                this.loadDatas()
            },
            loadDatas() {
                if (this.params.sTime instanceof Date) {
                    this.params.sTime = this.params.sTime.format('yyyy-MM-dd hh:mm:ss')
                }
                if (this.params.eTime instanceof Date) {
                    this.params.eTime = this.params.eTime.format('yyyy-MM-dd hh:mm:ss')
                }
                this.tableLoading = true
                window.myapi.do_post('/iot/dev/entryDatas', this.params).then(res => {
                    if (res.status === 200) {
                        if (res.data.data) {
                            let result = res.data.data
                            this.data1 = result.content
                            this.totals = result.totalElements
                        }
                    }
                }).catch(function (e) {
                }).finally(() => {
                    this.tableLoading = false
                })
            }
        }
    }
</script>

<style scoped>
    .nnad {
        /*text-align: center;*/
        font-size: 14px;
        font-weight: bolder;
    }
</style>
